<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模块修改页面</title>
</head>
<script th:inline="JavaScript">
    $(function (){
        $("#brandIds").select2();
        $("#specIds").select2();
        echoBrand();
        echoSpec();
        echoCustomAttributeItems();
    })

    function echoBrand(){
        var brandJson = [[${typeTemplate.brandIds}]];
        var brandList = JSON.parse(brandJson);
        var ids = [];
        for (var i = 0;i<brandList.length;i++){
            ids.push(brandList[i].id);
        }
        $("#brandIds").select2().val(ids).trigger("change")
    }

    function echoSpec(){
        var specJson = [[${typeTemplate.specIds}]];
        var specList = JSON.parse(specJson);
        var ids = [];
        for (var i = 0;i<specList.length;i++){
            ids.push(specList[i].id);
        }
        $("#specIds").select2().val(ids).trigger("change")
    }

    function echoCustomAttributeItems(){
        var custJson = [[${typeTemplate.customAttributeItems}]];
        var custList = JSON.parse(custJson);
        var html = "";
        for (var i = 0; i < custList.length; i++){
            html+="<tr>" +
                "<td>" +
                "<input  class='form-control' placeholder='规格选项' name='customAttributeItems' value="+custList[i].text+">" +
                "</td>" +
                "<td>" +
                "<button type=\"button\" class=\"btn btn-default\" title=\"删除\"  onclick=\"deleteNode(this)\"><i class=\"fa fa-trash-o\"></i> 删除</button>\n" +
                "</td>" +
                "</tr>"
        }
        $("#tbody").html(html)
    }

</script>
<body>
<form id="updateFrom">
    <table class="table table-condensed"  cellspacing="0" cellpadding="0"  >
        <input type="hidden" name="id" id="id" th:value="${typeTemplate.id}">
        <tr>
            <td style="text-align: center;vertical-align: middle">商品类型</td>
            <td>
                <input type="text" name="name" id="name" th:value="${typeTemplate.name}">
            </td>
        </tr>
        <tr>
            <td style="text-align: center;vertical-align: middle">关联品牌</td>
            <td>
                <select name="brandIds" id="brandIds" multiple style="width: 100%">
                    <option th:each="b : ${brandList}" th:value="${b.id}" th:text="${b.name}"></option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;vertical-align: middle">关联规格</td>
            <td>
                <select name="specIds" id="specIds" multiple style="width: 100%">
                    <option th:each="s : ${specList}" th:value="${s.id}" th:text="${s.specName}"></option>
                </select>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;vertical-align: middle">
                <input type="button" value="新建扩展属性" onclick="insertNode()">
            </td>
            <td>
            </td>
        </tr>
        <table class="table table-bordered table-striped table-hover dataTable" id="tab">
            <thead>
            <tr>
                <th style="text-align: center;vertical-align: middle">属性名称</th>
                <th style="text-align: center;vertical-align: middle">操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </table>
</form>
</body>
</html>